<template>
  <div class="container">
    <h1 style="padding:0.5% 35% 0.5% 40%">管理员平台</h1>
    <div class="user-info">
      <!-- 使用 ElDropdown 包裹用户名和下拉菜单 -->
      <el-dropdown
          v-if="aname"
          trigger="hover"
          @command="handleCommand"
          style="color: white"
      >
        <span class="el-dropdown-link">
          <el-avatar :icon="UserFilled" size="40" />
          {{ aname }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { UserFilled } from '@element-plus/icons-vue';
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
import router from "@/router";

const aname = ref(null);
if (sessionStorage.getItem('loginUser')) {
  const user = JSON.parse(sessionStorage.getItem('loginUser'));
  aname.value = user.aname || '未登录';
}

/**
 * 处理下拉菜单命令
 * @param {string} command - 命令名称
 */
const handleCommand = (command) => {
  if (command === 'logout') {
    // 执行登出操作
    logout();
  }
};

const logout = () => {
  router.push('/');
};
</script>

<style scoped>
.container {
  margin: 0 auto;
  text-align: center;
  background-color: #888888;
  display: flex;
}

.user-info {
  display: flex;
  align-items: center;
}

h1 {
  font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size: 33px;
  font-weight: bold;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  margin: 0;
}
</style>